<template>
  <el-dialog
    title="编辑活动"
    :visible.sync="visible"
    width="600px"
    :close-on-click-modal="false"
    class="dialog-container"
    @close="handlerClose"
  >
    <el-form ref="ticketForm" :model="formData" :rules="rules" size="small" label-width="92px">
      <el-form-item label="活动期号" prop="issue_no">
        <el-input v-model="formData.issue_no" maxlength="20" show-word-limit />
      </el-form-item>
    </el-form>
    <form-footer slot="footer" :loading="confirmLoading" class="dialog-footer" @cancel="handlerClose" @submit="handlerConfirm" />
  </el-dialog>
</template>

<script>
import FormFooter from '@/components/form-footer'
export default {
  name: 'UpdatedDialog',
  components: {
    FormFooter
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    ticket: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      searchTicketLoading: false,
      confirmLoading: false,
      formData: {
        ...this.ticket
      },
      rules: {
        issue_no: [{ required: true, message: '请输入活动期号', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 关闭后重置字段
    handlerClose() {
      this.$emit('update:visible', false);
    },
    // 保存活动
    handlerConfirm() {
      this.$refs.ticketForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          this.$http.put(
              '/admin/market/ticket/' + this.ticket.id + '/edit/issue_no',
              {
                issue_no: this.formData.issue_no
              },
              ({ msg }) => {
                this.$message.success(msg)
                this.confirmLoading = false
                this.handlerClose()
                this.$emit('reload');
              },
              ({ msg }) => {
                this.$message.error(msg)
                this.confirmLoading = false
              }
          )
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-container{
  .type-list{
    .type-list-item{
      margin-bottom: 10px;
      &:last-child{
        margin-bottom: 0;
      }
      .el-select{
        width: 100%;
      }
    }
  }
}
</style>
